@import './theme/default.less';

.zent-page-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .zent-page-mask {
    width: 100%;
    height: 100%;
    outline: 0;
    background-color: @theme-mask-black-6;

    &::before,
    &::after {
      position: absolute;
      content: ' ';
      top: 50%;
      left: 50%;
      width: 44px;
      height: 44px;
      margin-left: -22px;
      margin-top: -22px;
      border: 2px solid @theme-mask-black-2;
      border-radius: 50%;
    }

    &::before {
      background: url("");
      background-size: 44px;
      z-index: 1;
    }

    &::after {
      border-color: @theme-error-2 transparent transparent;
      animation: loading 0.6s linear infinite;
      background-color: white;
    }
  }
}

.zent-loading-container-static {
  position: relative;

  .zent-page-mask {
    background: @theme-mask-black-2;
  }

  &.zent-loading-container--empty {
    .zent-page-mask {
      background: transparent;
    }
  }
}

@keyframes loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
